<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01定义组件的两种方式</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <hello></hello>
    <hr>
    <my-world></my-world>

</div>
<script>
    /* --------------------------------------
    *  方式1 先创建组件构造器，然后由组件构造器创建组件
    *  --------------------------------------
    * */
    // 1.使用Vue.extend()创建一个组件构造器
    let MyComponent = Vue.extend({
        template: `<h3>Hello world component: MyComponent </h3>`
    });
    // 2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
    Vue.component('hello', MyComponent);


    /**
     * 方式2：直接创建组件(推荐)
     */
    Vue.component('my-world', {
        template: '<h1>你好，世界 component: my-world</h1>'
    });
    let vm = new Vue({ // 这里的vm也是一个组件，称为根组件Root
        el: "#app",
        data() {
            return {}
        },

    })
</script>
</body>
</html>